<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Session list')"
    width="500px"
    @close="store.hide()"
  >
    <el-card>
      <!-- 搜索session行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="6">
          <label>{{ t('Search session') }}:</label>
        </el-col>
        <el-col :span="18">
          <el-input
            v-model="store.searchKey"
            @input="store.handleSearchKeyChange"
            placeholder=""
            spellcheck="false"
          />
        </el-col>
      </el-row>

      <!-- 列表选择行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="6">
          <label>{{ t('List') }}:</label>
        </el-col>
        <el-col :span="14">
          <el-select
            v-model="store.selectedSession"
            :disabled="store.sessionList.length === 0"
            style="width: 100%"
          >
            <el-option
              v-for="session in store.sessionList"
              :key="session"
              :label="session"
              :value="session"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button
            type="primary"
            :disabled="store.sessionList.length === 0"
            @click="store.editSession"
            style="width: 100%"
          >
            {{ t('Edit') }}
          </el-button>
        </el-col>
      </el-row>
    </el-card>

  </el-dialog>
</template>

<script setup>
import { useSessionListStore } from '@/stores/sessionList'
import { useLanguageStore } from '@/stores/language'

const store = useSessionListStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Session list': {
      'en': 'Session list',
      'zh': 'Session列表'
    },
    'Search session': {
      'en': 'Search session',
      'zh': '搜索session'
    },
    'List': {
      'en': 'List',
      'zh': '列表'
    },
    'Edit': {
      'en': 'Edit',
      'zh': '编辑'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>